<template>
    <div>
        <!-- 卡片一：扫二维码 -->
        <div class="card bg-light mt-3">
            <div class="card-body d-flex">
                <img :src="param.user_weixin_url" width="120px" alt="">
                <div class="ms-5">
                    <p>&bull; 技术干货分享</p>
                    <p>&bull; 免费资料领取</p>
                    <p class="fw-bolder">&bull; 扫码领取更多惊喜</p>
                </div>
            </div>
        </div>

        <!-- 卡片二：联系方式 -->
        <div class="card bg-light mt-3">
            <div class="card-body">
                <h5>社交</h5>
                <hr />
                <p>QQ: {{ param.user_weixin_no }}</p>
                <p>邮箱: {{ param.user_email }}</p>
            </div>
        </div>

        <!-- 广告图 -->
        <img class="mt-3" :src="param.ad_1001_url" alt="" style="height: 130px; width: 100%;">

        <!-- 卡片三：文章分类 -->
        <div class="card bg-light mt-3">
            <div class="card-body">
                <h5>分类</h5>
                <hr />

                <p v-for="obj in this.countByArticleType">
                    <a :href="'blog-classify.html?'+obj.articleTypeId" class="card-link text-decoration-none text-primary">
                        {{ obj.articleTypeName }} <span style="color: gray">({{ obj.num }})</span>
                    </a>
                    </p>
                    <!-- <p>
		     <a href="#" class="card-link text-decoration-none text-primary">
                        面向对象 <span style="color: gray">(2)</span>
                    </a>
                </p> -->
            </div>
        </div>

        <!-- 卡片四：归档 -->
        <div class="card bg-light mt-3">
            <div class="card-body">
                <h5>归档</h5>
                <hr />
                <p v-for="obj1 in countByDate">
                    <a :href="'blog-archives.html?'+obj1.time.substring(0,4)" class="card-link text-decoration-none text-primary">
                        {{obj1.time}} <span style="color: gray">({{ obj1.count }})</span>
                    </a>
                </p>
                
            </div>
        </div>
    </div>
</template>

<script>
module.exports = {
    data() {
        return {
            countByArticleType:[],
       /* 用于存放文章类型以及该类型下的文章数量 */
            countByDate:[],
            param:{},
           
        };
    },
    methods: {
      /* 用于向后端发送请求以获取需要的数据(文章类型以及该类型下的文章数量) */
      getCountByArticleType(){
            this.$http.get("/article/countByArticleType").then(res=>{
                this.countByArticleType=res.data;
                console.log(this.countByArticleType);
            })
       },
       getCountByDate(){
            this.$http.get("/article/countByDate").then(res=>{
                this. countByDate=res.data;
                console.log(this. countByDate);
            })
       },
       getParams(){
        this.$http.get("/param/getParams").then(res=>{
            this.param=res.data;
            console.log(1111);
            console.log(this.param);
        })
       }
    },
    mounted() {
        /* 需要在页面加载完毕以后就发送请求,获取数据以显示 */
        this.getCountByArticleType();
        this. getCountByDate();
        this.getParams();
    },
}
</script>

<style></style>